<template>
	<section>
        <el-table
                v-loading="loading"
                ref="multipleTable" :data="prodData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="prodSubTitle" label="商品名称" width="120"></el-table-column>
            <el-table-column label="商品图片" width="120">
                <template slot-scope="scope"><img width="80" height="80" :src="scope.row.prodImage[0]" alt="#"></template>
            </el-table-column>
            <el-table-column prop="prodCategory" label="商品类别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="prodSupTitle" label="商品描述" show-overflow-tooltip></el-table-column>
            <el-table-column label="原价/折扣价" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.originPrice}}</el-tag>
                    <el-tag type="info">{{scope.row.currentPrice}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="info" @click="openSecKillDialog(scope.row._id)">添加到秒杀</el-button>
                    <el-button type="danger" @click="deleteProd(scope.row._id, scope.$index)">删除</el-button>
                    <el-button type="warning" @click="unpublish(scope.row._id, scope.$index)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--添加到秒杀dialog-->
        <el-dialog title="秒杀商品详情" :visible.sync="secKillDialogVisible">
            <el-form :model="secKillData" ref="secKill">
                <el-form-item label="秒杀价格" prop="killPrice">
                    <el-input v-model.number="secKillData.killPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存件数" prop="repertory">
                    <el-input v-model.number="secKillData.repertory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="秒杀时间段" prop="time">
                    <el-select v-model="secKillData.time" placeholder="请选择秒杀时间段">
                        <el-option label="今日秒杀" :value="new Date().getDate()"></el-option>
                        <el-option label="明日秒杀" :value="new Date().getDate() + 1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeSecKillDialog">取 消</el-button>
                <el-button type="primary" @click="submitSecKill">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
	</section>
</template>
<script>
	export default {
        data() {
            return {
                loading: true,
                prodData: [],
                secKillDialogVisible: false,
                secKillData: {
                    prodid: '',
                    killPrice: 0,
                    repertory: 0,
                    time: ''
                }
            }
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteProd(id, index) {
                this.$http.deleteProd({prodid: id})
                    .then(res=>{
                        if(res.data.code === 10013){
                            this.prodData.splice(index, 1);
                            this.$notify({
                                title: '成功',
                                message: '删除商品成功',
                                type: 'success'
                            });
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '删除商品失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(err=>{
                        this.$notify({
                            title: '失败',
                            message: '删除商品失败',
                            type: 'error'
                        });
                    });
            },
            unpublish(id, index) {
                this.$http.unpublish({prodid: id})
                    .then(res=>{
                        if(res.data.code === 10011) {
                            this.prodData.splice(index, 1);
                            this.$notify({
                                title: '成功',
                                message: '商品下架成功',
                                type: 'success'
                            });
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '商品下架失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(err=>{
                        this.$notify({
                            title: '失败',
                            message: '商品下架失败',
                            type: 'error'
                        });
                    });
            },
            openSecKillDialog(id) {
                this.secKillData.prodid = id;
                this.secKillDialogVisible = true;
            },
            closeSecKillDialog() {
                this.secKillData.secKillId = '';
                this.secKillDialogVisible = false;
            },
            submitSecKill() {
                this.$http.addSecKill(this.secKillData)
                    .then(res=>{
                        if(res.data.code = 10030){
                            this.$notify({
                                title: '成功',
                                message: '添加到秒杀成功',
                                type: 'success'
                            });
                        }
                        this.closeSecKillDialog();
                        this.$refs.secKill.clearFiles();
                    })
            }
        },
        created() {
            this.$http.getProd({status: 'published'})
                .then(res => {
                    console.log(res);
                    if(res.data.code = 10003) {
                        this.prodData = res.data.data;
                        this.loading = false;
                    }else{
                        this.$notify({
                            title: '警告',
                            message: '获取商品数据失败,请刷新重试!',
                            type: 'warning'
                        });
                    }
                })
                .catch(err=>{
                    this.$notify({
                        title: '警告',
                        message: '获取商品数据失败,请刷新重试!',
                        type: 'warning'
                    });
                });
        }
	};
</script>

<style scoped>

</style>
